<template>
	<view class="form-test">
		<view class="top_header">
			<vol-alert style="display: flex;justify-content: space-between;top: 0;z-index: 100;">共{{tableData.length}}条数据
				<view class="btns">
					<view class="btn">
						<u-button size="small" :plain="true" type="primary" @click="reset" shape="circle" text="取消"></u-button>
					</view>
					<view class="btn">
						<u-button size="small" :plain="true" type="success" @click="vailForm" shape="circle" text="确认"></u-button>
					</view>
				</view>
			</vol-alert>
			<view class="tableInfo">
				<vol-table-shuiping-three
					:class="[className]"
					:defaultLoadPage="load"
					:index="rowIndex"
					:ck="ck"
					ref="table"
					:direction="direction"
					:titleField="titleField"
					:height="height"
					:columns.sync="columns"
					:textInline="textInline"
					:tableData="tableData"
					:IP = "ip"
				></vol-table-shuiping-three>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				test: {
					a: 1,
					b: 2
				},
				editFormFields: {
					
				},
				editFormOptions: [],
				className: 'vol-table-888888',
				tableData: [],
				load: true, //是否默认加载table表格数据
				rowIndex: true, //是否显示table的行号
				ck: true, //设置显示checkbox，只有水平(table)显示类型时才生效
				direction: 'horizontal', //页面显示方向"horizontal"//list
				titleField: '', //如果table表格属性direction是以list显示，可以指定第一个标题
				columns: [],
				textInline: false, //强制文字在一行
				height: 0,
				ip:'',
			}
		},
		methods: {
			// 获取表格数据
			getTableList(value,codeArr){
				let params = {
					order: 'desc',
					page: 1,
					rows: 1000,
					sort: '距离天数 ASC,合同编码',
					wheres: JSON.stringify([{ name: '合同编码', value: value, displayType: 'like' }])
				};
				this.http.post('api/q_operations_qd/getPageData', params, true).then((result) => {
					if(result.status == 0){
						if (result.rows) {
							if(codeArr.length>0){
								for(let i=0;i<codeArr.length;i++){
									for(let j=0;j<result.rows.length;j++){
										if(result.rows[j].运维内容编码 == codeArr[i]){
											result.rows[j].ck=true;
										}
									}
								}
							}
							// 按照已选中在前排序
							result.rows.sort((a, b) => {
								const aCk = a.ck || false;
								const bCk = b.ck || false;
								if (aCk &&!bCk) {
									return -1;
								} else if (!aCk && bCk) {
									return 1;
								} else {
									return 0;
								}
							});
							// result.rows.sort((a, b) => b.运维内容编码 - a.运维内容编码);
							this.tableData = result.rows;
						}
					}else{
						uni.showToast({
							title: '获取失败',
						    icon:'error',
							duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
						    mask:false,
						});
					}
				})
			},
			extraClick(item) {
				
				
			},
			// 确认
			vailForm() {
				let rows= this.$refs.table.getSelectRows();
				if(rows.length>0){
					const arr = rows.map((item) => {
						return {
							Code: item.运维内容编码,
							Name: item.运维内容,
							Operations_date: item.应运维日期
						};
					});
					this.$store.commit('setPushDetailArr', arr);
					// 返回父页面
					uni.navigateBack({
					  delta: 1
					});
					// 成功或者失败提示
					// this.$toast('共选中'+rows.length+'行');
				}else{
					this.$toast("请先勾选保存");
				}
				
			},
			// 取消
			reset() {
				let rows= this.$refs.table.getSelectRows();
				if(rows){
					for(let i=0;i<rows.length;i++){
						rows[i].ck=false
					}
				};
				
				setTimeout(() => {
					uni.navigateBack();
				}, 500);
			},
			inputConfirm(field, e) {
				
			}
		},
		onShow() {

		},
		onReady() {
			//设置表单默认值请写在onReady中
			
		},
		onLoad(params) {
			this.ip = this.$store.state.IP;
			this.detaiDelStatu = '';
			this.columns = [
			{ field: '运维内容', title: '运维内容', type: 'string',width:150 },
			{ field: '最近运维日期', title: '最近运维日期', type: 'datetime',width:150 },
			{ field: '应运维日期', title: '应运维日期', type: 'datetime',width:150 },
			{ field: '距离天数', title: '距离天数', type: 'int' },
			];
			const setCheckTableData = uni.getStorageSync('setCheckTableData');
			let codeArr = [];
			if(setCheckTableData != undefined){
				let table = JSON.parse(setCheckTableData);
				for(let i=0;i<table.length;i++)[
					codeArr.push(table[i].Code)
				]
			}
			// 获取合同编码params.site
			this.getTableList(params.site,codeArr);
			
		}
	}
</script>

<style lang="less" scoped>
	.form-test {
		height: auto;
		margin-top: -20rpx;
		background: #f6f6f6;
		padding-top: 20rpx;
	}

	.btns {
		display: flex;
		// padding: 0rpx 60rpx;

		.btn {
			flex: 1;
			padding: 5rpx;
		}
	}
	.tableInfo{
		background-color: #f6f6f6;
		padding: 0rpx 10rpx 10rpx 10rpx;
	}
</style>
